<route>
    {
        meta: {
            layout: 'index',
            title:'打捞筒信息管理'
        }
    }  
</route>
<template>
    <view>
        <div class="app-container">
            <a-row>
                <!-- <a-select v-model:value="query.type" style="width: 130px" placeholder="请选择类型" :options="typeOptions"
                    :change="getList()"></a-select> -->
                <a-input-search v-model:value="searchKey" placeholder="请输入打捞筒信息" enter-button="搜索"
                    style="width: 250px; margin-bottom: 10px; margin-left: 10px;" @search="handleQuery()" />
                <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
                <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
                    <template #icon><plus-outlined /></template>新增
                </a-button>
            </a-row>
            <a-table :dataSource="dataSource" :columns="props.columns" :scroll="{ x: 1000 }" bordered :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <!-- string -->
                    <template
                        v-if="['applicableFishingRange', 'extendedCylinderBuckleType', 'extendedCylinderExternalDimensions', 'kawaExternalDimensions',
                            'productQualificationCertificate', 'remarks', 'salvageSubjectBuckleType', 'salvageSubjectExternalDimensions',
                            'salvageSubjectInspectionNumber', 'salvageTubeModel', 'shoeBuckleType', 'shoeExternalDimensions', 'toolNumber', 'type',
                            'upperJointBuckleType', 'upperJointExternalDimensions', 'upperJointInspectionNumber', 'extendedCylinderInspectionNumber'].includes(column.dataIndex)">
                        <div>
                            <a-input v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]"
                                style="margin: -5px 0; width: 100%;" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <!-- double -->
                    <template
                        v-if="['effectiveSalvageLength', 'diameter', 'kawaInternalDimensions', 'limitLoad', 'locatingRingInnerDiameter',
                            'locatingRingOuterDiameter', 'maximumAllowableForce', 'shoeInnerDiameter', 'upperJointWaterHole'].includes(column.dataIndex)">
                        <div>
                            <a-input-number v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]" :min="0"
                                style="margin: -5px 0;width: 100%;" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'action'">
                        <div>
                            <span v-if="editableData[record.id]">
                                <a-button type="link" @click="save(record.id)">保存 </a-button>
                                <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                        <a-button type="link">取消</a-button>
                                    </a-popconfirm></AntdZh>
                            </span>
                            <span v-else>
                                <a-button type="link" @click="edit(record.id)">编辑</a-button>
                                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                        <a-button type="link" danger>删除</a-button>
                                    </a-popconfirm></AntdZh>
                            </span>
                        </div>
                    </template>
                </template>
            </a-table>
            <AntdZh>
                <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                    @change="getList" />
            </AntdZh>

            <!-- 新版添加或修改部门对话框 -->
            <AntdConfirmModal title="新增打捞筒" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
                <a-form :model="form" name="basic" :label-col="{ span: 10 }">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="类型" name="type">
                                <a-input v-model:value="props.toolType" style="width: 150px;"
                                    placeholder="请输入类型" disabled="true"></a-input>
                                <!-- <a-select v-model:value="form.type" label-in-value :options="typeOptions"
                                    placeholder="请选择类型" style="width: 150px"></a-select> -->
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="捞筒型号" name="salvageTubeModel">
                                <a-input v-model:value="form.salvageTubeModel" style="width: 150px;"
                                    placeholder="请输入捞筒型号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="工具编号" name="toolNumber">
                                <a-input v-model:value="form.toolNumber" style="width: 150px;" controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="卡瓦内径" name="kawaInternalDimensions">
                                <a-input-number v-model:value="form.kawaInternalDimensions" style="width: 150px;"
                                    controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="打捞筒直径" name="diameter">
                                <a-input-number v-model:value="form.diameter" style="width: 150px;"
                                    controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="产品合格证" name="productQualificationCertificate">
                                <a-input v-model:value="form.productQualificationCertificate" style="width: 150px;"
                                    controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="上接头探伤编号" name="upperJointInspectionNumber">
                                <a-input v-model:value="form.upperJointInspectionNumber" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="上接头上下扣型" name="upperJointBuckleType">
                                <a-input v-model:value="form.upperJointBuckleType" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="上接头水眼" name="upperJointWaterHole">
                                <a-input-number v-model:value="form.upperJointWaterHole" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="上接头外形尺寸" name="upperJointExternalDimensions">
                                <a-input v-model:value="form.upperJointExternalDimensions" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="打捞主体探伤编号" name="salvageSubjectInspectionNumber">
                                <a-input v-model:value="form.salvageSubjectInspectionNumber" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="打捞主体上下扣型" name="salvageSubjectBuckleType">
                                <a-input v-model:value="form.salvageSubjectBuckleType" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="打捞主体外形尺寸" name="salvageSubjectExternalDimensions">
                                <a-input v-model:value="form.salvageSubjectExternalDimensions" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="加长筒探伤编号" name="extendedCylinderInspectionNumber">
                                <a-input v-model:value="form.extendedCylinderInspectionNumber" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="加长筒上下扣型" name="extendedCylinderBuckleType">
                                <a-input v-model:value="form.extendedCylinderBuckleType" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="加长筒外形尺寸" name="extendedCylinderExternalDimensions">
                                <a-input v-model:value="form.extendedCylinderExternalDimensions" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="卡瓦外形尺寸" name="kawaExternalDimensions">
                                <a-input v-model:value="form.kawaExternalDimensions" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="定位圈外径" name="locatingRingOuterDiameter">
                                <a-input-number v-model:value="form.locatingRingOuterDiameter" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="定位圈内径" name="locatingRingInnerDiameter">
                                <a-input-number v-model:value="form.locatingRingInnerDiameter" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="引鞋扣型" name="shoeBuckleType">
                                <a-input v-model:value="form.shoeBuckleType" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="引鞋内径" name="shoeInnerDiameter">
                                <a-input-number v-model:value="form.shoeInnerDiameter" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="引鞋外型尺寸" name="shoeExternalDimensions">
                                <a-input v-model:value="form.shoeExternalDimensions" style="width: 150px;"
                                    controls-position="right" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="最大允许拉力" name="maximumAllowableForce">
                                <a-input-number v-model:value="form.maximumAllowableForce" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="kN" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="极限载荷" name="limitLoad">
                                <a-input-number v-model:value="form.limitLoad" style="width: 150px;"
                                    controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="适用落鱼范围" name="applicableFishingRange">
                                <a-input v-model:value="form.applicableFishingRange" style="width: 150px;"
                                    controls-position="right" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="有效打捞长度" name="effectiveSalvageLength">
                                <a-input-number v-model:value="form.effectiveSalvageLength" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="备注" name="remarks">
                                <a-input v-model:value="form.remarks" style="width: 150px;" controls-position="right" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </AntdConfirmModal>
        </div>
    </view>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/salvageTube";
import { PlusOutlined } from '@ant-design/icons-vue';
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const total = ref(1)
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', type: props.toolType });
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
const editableData = reactive({});
// const dataDrawerRef = ref(null);
// const typeOptions = ref([
//     {
//         value: '篮瓦打捞筒',
//         label: '篮瓦打捞筒',
//     }, {
//         value: '其他',
//         label: '其他',
//     }
// ])
const props = defineProps({
    toolType: {
        type: String,
    },
    columns: {
        type: Array,
    },
});
watch(() => props.toolType, () => {
    getList()
});
// 保存
const save = key => {
    updateOne(editableData[key]).then(res => {
        // console.log('save', res);
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
};
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};
//编辑
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
};
// 新增
function addItem() {
    form.value = {}
    modalRef.value.openModal()
}
/** 提交按钮 */
function submitForm() {
    form.value.type = props.toolType
    createOne(form.value).then(res => {
        // console.log('createOne', res)
        $.showToast({
            title: '添加成功',
            icon: 'success'
        })
        modalRef.value.closeModal();
        getList()
    })
}

function getList() {
    query.value.type = props.toolType
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = { pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', type: props.toolType }
    getList();
}
</script>